<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>循环渲染</h2>
      <h4>循环数组</h4>
      <ul>
        <!-- 在v-for里面in和of是完全等价的 -->
        <!-- 渲染数组的时候，可以使用第二个参数index -->
        <!-- <li v-for="(item, index) of list">{{ item.message }} - {{ index }}</li> -->
        <li v-for="({message}, index) of list">{{ message }} - {{ index }}</li>
      </ul>

      <h4>循环对象</h4>
      <ul>
        <!-- 渲染对象的时候，有三个参数value，key，index -->
        <li v-for="(value, key, index) in myObject">
          {{ value }} - {{ key }} - {{ index }}
        </li>
      </ul>

      <h4>使用范围值</h4>
      <ul>
        <!-- 5表示[1,2,3,4,5] -->
        <li v-for="item in 5">{{ item }}</li>
      </ul>

      <h4>在template上面使用v-for</h4>
      <ul>
        <template v-for="{name, id} in arr">
          <li>{{ name }}</li>
          <li>{{ id }}</li>
        </template>
      </ul>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            list: [{ message: "Foo" }, { message: "Bar" }],
            myObject: {
              title: "How to do lists in Vue",
              author: "Jane Doe",
              publishedAt: "2016-04-10",
            },
            arr: [
              {
                name: "xiaohua",
                id: 1,
              },
              {
                name: "dahua",
                id: 2,
              },
            ],
          };
        },
      }).mount("#app");

      // es6的模块化里面用as取别名，解构里面用冒号取别名
      // const obj = {
      //   name: "xiaohua",
      //   age: 20,
      // };
      // const { name: name } = {
      //   name: "xiaohua",
      //   age: 20,
      // };
      // const { name: name2 } = obj;
    </script>
  </body>
</html>
